
<!doctype html>
<html style="height:100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,minimal-ui"/>
    <link href="http://www.qlcoder.com//uploads/145620041535888.png" type="image/x-icon" rel=icon>
    <title>千里码-话题</title>
    <link href="http://www.qlcoder.com//css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/bootstrap-theme.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="http://www.qlcoder.com//font/iconfont.css">


    <link href="http://www.qlcoder.com//css/base.css" rel="stylesheet">
    <link href="http://www.qlcoder.com//css/people.css" rel="stylesheet">
    <link href="/css/topic.css" rel="stylesheet">
</head>
<body class="html-margin">
<div class="q_warp" style="min-height:100%;margin-bottom:-60px;">
    <nav class="nav">
        <!--<div style="width:8.33%;height: 50px;float: left;"></div>-->
        <div class="container-fluid"><!--fluid-->
            <div class="pull-left">
                <a class="" href="/home" style="display: inline-block;"><img src="/img/ql_logo1.png"> </a>
            </div>
            <div class="pull-left nav-list">
                <ul class="" style="padding:0;">
                    <li class="">
                        <a href="/home"><span color="gray" style="font-size:15px;">技能树</span></a>
                    </li>
                    <li class="active">
                        <a href="/discuss/all"><span color="gray" style="font-size:15px;">讨论区</span></a>
                    </li>
                    <li class="">
                        <a href="/article/all"><span color="gray" style="font-size:15px;">文章</span></a>
                    </li>
                    <li class="">
                        <a href="/rank"><span color="gray" style="font-size:15px;">排行榜</span></a>
                    </li>
                    <li class="">
                        <a href="/help"><span color="gray" style="font-size:15px;">帮助中心</span></a>
                    </li>
                    <!-- <li class=""><a href="/help#opinion"><span color="gray" style="font-size:15px;">意见反馈<span></span></span></a></li> -->
                </ul>
            </div>
            <div class="pull-right ">
                <ul class="avator pull-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle pull-left" data-toggle="dropdown"
                           role="button" aria-haspopup="true" aria-expanded="false">
                            <img style="max-width:100px; margin-top: -20px;margin-bottom: -15px;margin-right: 10px;"
                                 src="/system/App/User/avatars/000/000/347/thumb/2000.gif" class="img-circle" alt="cinque terre"
                                 width="30" height="30">

                            <!--<span class="badge s_tip">4</span>-->
                            &nbsp;&nbsp;<span color="gray" style="font-size:15px;">端着木鱼敲代码&nbsp;</span>
                            <span class="caret"></span>
                        </a>
                        <!--<span class="badge s_tip">4</span>-->
                        <ul class="dropdown-menu ">
                            <li><a href="/profile/792c"
                                   target="_blank"><i class="iconfont">&#xe612;</i>我的主页</a></li>
                            <li><a href="/u/update" target="_blank"><i class="iconfont">&#xe603;</i>设置</a>
                            </li>
                            <li><a href="/imglib" target="_blank"><i class="iconfont">&#xe61b;</i>图片库</a>
                            </li>
                            <li><a href="/inbox" target="_blank"><i class="iconfont">&#xe607;</i>私信
                            </a></li>
                            <!--<li role="separator" class="divider"></li>-->
                            <li><a href="/logout" target="_blank"><i class="iconfont">
                                &#xe613;</i>退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

    </nav>
    <div class="contain">
        <main>
            <section class="topic-list">
                <div class="module profile clearfix">
                    <a class="avatar" href=""><img src="http://www.qlcoder.com/uploads/291e745921/146379778321621.png"></a>
                    <div class="content">
                        <div class="title">
                            <h1>
                                <a href="">看什么球 · 刷千里码</a>
                            </h1>
                            <span class="status">已结束</span></div>
                        <!-- 话题描述 s-->
                        <div class="description">
                            进球的快感哪比得上千里码做题爽!
                        </div>
                        <!-- 话题描述 e-->
                        <div class="actions">
                            <span class="visits text-muted">10066095 次浏览 </span>
                            <span class="bull">•</span>
                            <a href="" class="followers text-muted">
                                <span class="count" data-count="10980"> 10980</span>人关注
                            </a>
                        </div>
                    </div>
                </div>
                <div class="module">
                    <ul class="menu-nav horizontal">
                        <li class="active">
                            <a href="">
                                37 <span class="nowrap">个问题</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                60 <span class="nowrap">条讨论</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 问题 s-->
                <div class="feeds loose">
                    <ul class="items">
                        <!-- 单个问题 s-->
                        <li class="item">
                            <div class="item-header">
                                <h3 class="item-title">
                                    <a class="item-title-link" href="">在千里码做了这么多道题，没有升职加薪，也没有迎娶白富美，更别提走上人生巅峰，这到底哪里出了问题呢？</a>
                                </h3>
                            </div>
                            <div class="item-footer">
                                <ul class="item-actions">
                                    <li>
                                        <button class="button-text follow">
                                            <i></i>
                                            <span>关注</span>
                                        </button>
                                    </li>
                                    <li>
                                        <button class="button-text comment">
                                            <i></i>
                                            <span>1条评论</span>
                                        </button>
                                    </li>
                                </ul>
                                <div class="ql-comment-box none">
                                    <i class="icon-bubble"></i>
                                    <!-- 评论列表S-->
                                    <div class="ql-comment-list">
                                        <!-- 单个评论 S-->
                                        <div class="ql-item-comment">
                                            <a class="ql-item-link">
                                                <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="ql-item-link-avatar">
                                            </a>
                                            <div class="ql-comment-content-wrap">
                                                <div class="ql-comment-header">
                                                    <a class="ql-link" href="" title="shuai">shuai</a>
                                                </div>
                                                <div class="ql-comment-content">
                                                    在千里码做了这么多道题，没有升职加薪，也没有迎娶白富美，更别提走上人生巅峰，还要每天被人肉战车、泰斗、人赢、群帅们吊打，这到底哪里出了问题呢？
                                                </div>
                                                <div class="ql-comment-footer">
                                                    <span class="data">2016-7-12</span>
                                                    <a class="reply" href="javascript:;"><i></i>回复</a>
                                                    <a class="vote" href="javascript:;"><i></i>赞</a>
                                                    <!-- 大于0的时候显示  控制样式nil-->
                                                    <span class="like-num nil">1赞</span>
                                                </div>
                                                <!-- 输入框 S-->
                                                <div class="ql-comment-form expanded none">
                                                    <div class="ql-comment-editable-wrap">
                                                        <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="avatar none">
                                                        <div class="ql-comment-editable editable" aria-label="写下你的评论" role="textbox" contenteditable="true"></div>
                                                    </div>
                                                    <div class="ql-command">
                                                        <a class="ql-command-cancel" href="javascript:;">取消</a>
                                                        <a class="btn btn-primary ql-comment-submit" href="javascript:;">评论</a>
                                                    </div>
                                                </div>
                                                <!-- 输入框 E-->

                                            </div>
                                        </div>
                                        <!-- 单个评论 E-->
                                        <!-- 单个评论 S-->
                                        <div class="ql-item-comment">
                                            <a class="ql-item-link">
                                                <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="ql-item-link-avatar">
                                            </a>
                                            <div class="ql-comment-content-wrap">
                                                <div class="ql-comment-header">
                                                    <a class="ql-link" href="" title="shuai">shuai</a>
                                                </div>
                                                <div class="ql-comment-content">
                                                    在千里码做了这么多道题，没有升职加薪，也没有迎娶白富美，更别提走上人生巅峰，还要每天被人肉战车、泰斗、人赢、群帅们吊打，这到底哪里出了问题呢？
                                                </div>
                                                <div class="ql-comment-footer">
                                                    <span class="data">2016-7-12</span>
                                                    <a class="reply" href="javascript:;"><i></i>回复</a>
                                                    <a class="vote" href="javascript:;"><i></i>赞</a>
                                                    <!-- 大于0的时候显示  控制样式nil-->
                                                    <span class="like-num nil">1赞</span>
                                                </div>
                                                <!-- 输入框 S-->
                                                <div class="ql-comment-form expanded none">
                                                    <div class="ql-comment-editable-wrap">
                                                        <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="avatar none">
                                                        <div class="ql-comment-editable editable" aria-label="写下你的评论" role="textbox" contenteditable="true"></div>
                                                    </div>
                                                    <div class="ql-command ">
                                                        <a class="ql-command-cancel" href="javascript:;">取消</a>
                                                        <a class="btn btn-primary ql-comment-submit" href="javascript:;">评论</a>
                                                    </div>
                                                </div>
                                                <!-- 输入框 E-->

                                            </div>
                                        </div>
                                        <!-- 单个评论 E-->

                                    </div>
                                    <!-- 评论列表E-->


                                    <div class="ql-comment-form ql-comment-box-foot expanded">
                                        <!-- 输入框 S-->
                                        <div class="ql-comment-form expanded">
                                            <div class="ql-comment-editable-wrap">
                                                <img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" class="avatar">
                                                <div class="ql-comment-editable editable add" aria-label="写下你的评论" role="textbox" contenteditable="true"><p>说点什么吧^_^:</p></div>
                                            </div>
                                            <div class="ql-command none">
                                                <a class="ql-command-close" href="javascript:;">取消</a>
                                                <a class="btn btn-primary ql-comment-add" href="javascript:;">评论</a>
                                            </div>
                                        </div>
                                        <!-- 输入框 E-->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 单个问题 e-->

                    </ul>
                </div>
                <!-- 问题 e-->
            </section>
            <aside class="topic-sidebar">
                <div class="topic-organizations">
                    <div class="header">
                        <h3>发起者</h3>
                    </div>
                    <div class="body">
                        <ul>
                            <li class="item">
                                <div class="item-warp">
                                    <a href="" class="item-link"><img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" ></a>
                                    <div class="content">
                                        <a href="" class="name">abcd</a>
                                        <div class="bio">举办过 10 次话题</div>
                                    </div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="item-warp">
                                    <a href="" class="item-link"><img src="http://www.qlcoder.com/system/App/User/avatars/000/000/347/thumb/2000.gif" ></a>
                                    <div class="content">
                                        <a href="" class="name">abc</a>
                                        <div class="bio">举办过 10 次话题</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>
        </main>
    </div>
    <div style="height:60px;"></div>
</div>
<!-- Footer -->
<footer>
    <p>©2016 千里码 浙ICP备15038807号-1 联系我们:oreo@qlcoder.com <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=08dcd44232943b517c2ed04dceb097155575f604791c57bbd2f9759e90e22d58">qq群480394714</a>
    </p>
</footer>
<script src="http://www.qlcoder.com//js/jquery.min.js"></script>
<script src="http://www.qlcoder.com//js/bootstrap.min.js"></script>
<script src="http://www.qlcoder.com//js/base.js"></script>
<script>
    $(function () {
        //展开问题评论
        $("button.comment").each(function () {
            var _=this;
            var oldHtml=$(this).find("span").html();
            $(_).click(function () {
                var target=$(this).parents(".item-footer").find(".ql-comment-box");
                target.toggleClass("none");
                if(!target.hasClass("none")){
                    $(this).find("span").html("收起评论");
                }else{
                    $(this).find("span").html(oldHtml);
                }
            })
        });
        //回复他人评论
        $(".reply").each(function(){
           var _=this;
            $(_).click(function(){
                $(this).parents(".ql-item-comment").find(".ql-comment-form").toggleClass("none");
            })
        });
        //取消回复他人评论
        $(".ql-command-cancel").each(function () {
            var _=this;
            $(_).click(function () {
                $(this).parents(".ql-comment-form").addClass("none").find(".ql-comment-editable").html("");
            })
        });
        
        //添加评论
        $(".ql-comment-editable.add").each(function () {
            var _=this;
            $(_).focus(function () {
                $(this).html("").parents(".ql-comment-form").find(".ql-command").removeClass("none");
            });
        });

        //取消添加评论
        $(".ql-command-close").each(function () {
            var _=this;
            $(_).click(function () {
                $(this).parent().addClass("none").parents(".ql-comment-form").find(".ql-comment-editable.add").html("<p>说点什么吧^_^:</p>")
            })
        })
    })
</script>
</body>
</html>


